<template>
  <view class="template-pay tn-safe-area-inset-bottom">


    <view :style="{height: vuex_custom_bar_height + 'px'}" class="tn-navbg">
      <!-- 顶部自定义导航 -->
      <tn-nav-bar alpha customBack fixed>
        <view slot="back" class='tn-custom-nav-bar__back'
              @click="goBack">
          <text class='icon tn-icon-left'></text>
          <text class='icon tn-icon-home-capsule-fill'></text>
        </view>
        <view class="tn-flex tn-flex-col-center tn-flex-row-center">
          <text class="tn-text-bold tn-text-xl tn-color-black">已提现</text>
        </view>
      </tn-nav-bar>
    </view>

    <view>
      <tn-picker mode="time" v-model="show" :params="params" @confirm="changeTime"></tn-picker>
    </view>
    <view class="tn-safe-area-inset-bottom tn-margin-bottom-sm" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <view class="tn-flex tn-padding-sm" style="background: rgb(252,252,252); justify-content: space-between">
        <view class="tn-color-grey">
          <span>收入:</span>￥{{invitedList[0] ? invitedList[0].balance : "0.00"}}
        </view>
        <view @click="show = true">
          {{currentTime}}
          <text class="tn-icon-down" style="padding-left: 10rpx;"></text>
        </view>
      </view>
      <view v-if="invitedList.length > 0">
        <view v-for="(item,index) in invitedList" :key="index">
          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding">
            <view class="justify-content-item">
              <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                <view class="logo-pic">
                  <view class="logo-image">
                    <tn-avatar class="tn-margin-xs" style="flex: 0" :src="item.headSculpture" size="lg"></tn-avatar>
                  </view>
                </view>
                <view class="tn-padding-right tn-color-black">
                  <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold">
                    <view class="tn-text-bold">{{ item.nickname }}</view>
                  </view>
                </view>
              </view>
              <view class="tn-color-grey">{{ item.createTime }}</view>
            </view>
            <view class="justify-content-item">
              <view class="tn-flex tn-flex-row-right">
                <view style="color: #FFA726">
                  <view class="tn-text-bold" style="font-size: 36rpx">
                    +{{item.withdrawnAmount}}
                  </view>
                  <view>已提现</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="tn-color-gray tn-flex tn-flex-row-center">暂无数据</view>
    </view>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import TnAvatar from "../tuniao-ui/components/tn-avatar/tn-avatar.vue";
import TnSwipeAction from "../tuniao-ui/components/tn-swipe-action/tn-swipe-action.vue";
import TnSwipeActionItem from "../tuniao-ui/components/tn-swipe-action-item/tn-swipe-action-item.vue";
import TnPicker from "../tuniao-ui/components/tn-picker/tn-picker.vue";
import {getWithdrawalListApi} from "../api/report";

export default {
  name: "invited",
  components: {TnPicker, TnSwipeActionItem, TnSwipeAction, TnAvatar},
  mixins: [template_page_mixin],
  data() {
    return {
      invitedList: [],
      show: false,
      params: {
        year: true,
        month: true,
      },
      currentTime: "",
      year: "",
      month: ""
    }
  },
  mounted() {
    let date = new Date()
    const year = date.getFullYear();//获取完整的年份(4位)
    let month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    if(month < 10) {
      month = "0" + month;
    }
    this.handleTime({year, month});
  },
  methods: {
    async queryList() {
      try {
        const res = await getWithdrawalListApi(this.year + "-" + this.month)
        if (res.code === 200) {
          this.invitedList = res.data
        }
      } catch (e) {
        console.log(e)
      }
    },
    changeTime(value) {
      this.handleTime(value);
    },
    handleTime(value) {
      this.currentTime = value.year + "年" + value.month + "月";
      this.year = value.year;
      this.month = value.month;
      this.queryList();
    }
  }
}
</script>


<style scoped lang="scss">
.custom_container {
  margin-top: 21rpx;
  padding: 20rpx;

  .custom-item {
    display: flex;
    height: 100rpx;
    align-items: center;
    margin-bottom: 10rpx;

    .empty-box {
      flex: 1;
    }
  }
}

.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #FFFFFF;
  }
}


.tn-navbg {
  //background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
  // background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b);
  // background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423);
  // background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a);
  background-size: 500% 500%;
  animation: gradientBG 15s ease infinite;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

</style>